<template>
    <div class="search-view">

        <div class="search-btn">
            <el-button type="primary" @click="search">拉框查询</el-button>
        </div>

        <div class="search-table" v-show="tableData.length > 0">
            <el-table :data="tableData" @row-click="fly">
                <el-table-column prop="event_num" label="事件编号" align="center" />
                <el-table-column prop="level" label="事故级别" align="center" />
                <el-table-column prop="area" label="事故区域" align="center" />
                <el-table-column prop="name" label="事故类型" align="center" />
                <el-table-column prop="car_num" label="车牌号" align="center" />
                <el-table-column prop="phone" label="手机号" width="150" align="center" />
            </el-table>
        </div>

    </div>
</template>
<script setup>
import { ref, onBeforeUnmount, onMounted, inject } from 'vue'
import { getWuhanEvents } from '@/api';
import { DrawEvent, DrawRect } from '@antv/l7-draw'
import { PointLayer } from '@antv/l7'
import { pointsWithinPolygon } from '@turf/turf';
import { center } from '@turf/turf';
const tableData = ref([])
const { map, scene } = inject('mapScene')
let draw, eventData, pointlayer, points
// 如果不声明 let draw 等变量，那么要写成const draw = ref（null），draw.value = new DrawRect(scene, {});的形式
onMounted(async () => {
    map.flyTo({
        center: [114.406325, 30.465113],
        zoom: 15,
        pitch: 45,
    })
    const { data } = await getWuhanEvents()
    eventData = data
})

const search = (() => {
    if (tableData.value.length) {
        tableData.value = []
    }
    if (draw) {
        draw.destroy()
        draw = null
    }
    if (pointlayer) {
        scene.removeLayer(pointlayer)
    }
    draw = new DrawRect(scene, {})
    draw.enable()
    draw.on(DrawEvent.Add, e => {
        //e记录就是当前绘制的矩形的要素信息 geojson格式
        //data中哪些点在e这个矩形呢?
        //turf是用来进行gis分析的库 它可以计算出 当前多边形中包含多少个点
        points = pointsWithinPolygon(eventData, e)
        // console.log(points);
        //将这些点绘制到地图上
        pointlayer = new PointLayer({
            name: 'eventsLayer'
        })
        pointlayer.source(points)
            .color('pink')
            .shape('circle')
            .size(30)
            .active(true)
            .animate(true)
        scene.addLayer(pointlayer)
        //将这些点的数据放到tableData中
        tableData.value = points.features.map(item => {
            return {
                ...item.properties,
                center: item.geometry.coordinates
            }
        })
    })
})
const fly = ((row) => {
    if (draw) {
        draw.destroy()
        draw = null
    }
    const evenrCenter = row.center
    map.flyTo({
        center: evenrCenter,
        zoom: 15,
        pitch: 0
    }
    )
})
onBeforeUnmount(() => {
    if (pointlayer) {
        scene.removeLayer(pointlayer)
    }
    if (draw) {
        draw.destroy()
        draw = null
    }
})
</script>
<style scoped lang="scss">
.search-view {
    .search-btn {
        position: absolute;
        top: 170px;
        right: 5px;
    }

    .search-table {
        position: absolute;
        width: 60%;
        bottom: 100px;
        left: 20%;
        z-index: 1000;
    }

    :deep(.el-table__cell) {
        background-color: #ccc;
    }

    :deep(.el-table tr):hover {
        background-color: #b6b3b3;
    }

    .el-table {
        max-height: 300px;
        overflow-y: scroll;
        background-color: #ccc;
    }
}
</style>